<template>
  <div v-if="pageStatus === 1">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.name" :name="item.id">
        <div v-if="activeName === 1">
          <LaborWorkers />
        </div>
        <div v-else>
          <internalWorkers />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

  <!-- 表单弹窗：添加/修改 -->
   <div v-else>
    <LaborForm v-if="activeName === 1" ref="LaborFormRef" />
    <InternalForm v-else ref="InternalFormRef" />
   </div>

</template>
<script setup>
import LaborWorkers from './laborWorkers.vue'
import internalWorkers from './internalWorkers.vue'
import LaborForm from './laborForm.vue'
import InternalForm from './internalForm.vue'
import { nextTick } from 'vue'
import { defaultProps, handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'
const tabList = [
  { name: '劳务员工', id: 1 },
  { name: '内部员工', id: 2 },
]
const deptTree = ref() // 树形结构
provide('deptTree', deptTree)
defineOptions({ name: 'SystemRole' })
let pageStatus = ref(1) // 页面状态：1 - 列表页；2 - 新增编辑页
const LaborFormRef = ref()
const InternalFormRef = ref()
/**
 * 切换页面状态
 * @param {*} status 1 - 列表页；2 - 新增编辑页
 * @param {*} type 1 - 新增   2 - 编辑
 */
const setPageStatus = (status, type, id) => { 
  pageStatus.value = status 
  if(!type) return
  if(activeName.value === 1){
    nextTick(() => {
      LaborFormRef.value?.init(type, id)
    })
  }else{
    nextTick(() => {
      InternalFormRef.value?.init(type, id)
    })
  }
  
}
provide('setPageStatus', setPageStatus)

const activeName = ref(1)
const handleClick = (tab, event) => {
  activeName.value = tab.props.name
}


/** 获得部门树 */
const getTree = async () => {
  deptTree.value = []
  const data = await DeptApi.getSimpleDeptList()
  deptTree.value = handleTree(data)
}

/** 初始化 **/
onMounted(() => {
  getTree()
})
</script>
